<script setup lang="ts">
import { onMounted, ref, shallowRef, computed } from 'vue';
import { useCustomizerStore } from '@/stores/customizer';
import { useMenuStore } from '@/stores/menu';
import sidebarItems from './sidebarItem';
import NavItem from './NavItem/index.vue';
import NavCollapse from './NavCollapse/NavCollapse.vue';
import Logo from '../logo/Logo.vue';
import { Icon } from '@iconify/vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const menuStore = useMenuStore();

// 监听路由变化
router.beforeEach((to, from, next) => {
  console.log('侧边栏监听到路由跳转:');
  console.log('  从:', from.path);
  console.log('  到:', to.path);
  console.log('  匹配的路由:', to.matched);
  next();
});

// 将后端菜单数据转换为侧边栏菜单格式
const convertToSidebarFormat = (menus: any[]) => {
  return menus.map((menu, index) => {
    // console.log(`处理父菜单: ${menu.title}, path: ${menu.path}`);
    return {
      title: menu.meta?.title || menu.title,
      icon: menu.meta?.icon || 'widget-add-line-duotone',
      to: menu.path,
      id: index + 1,
      children: menu.children ? menu.children.map((child: any) => {
        // 子菜单路径 = 父菜单路径 + 子菜单路径
        let childPath = child.path;
        if (!child.path.startsWith('/')) {
          childPath = `${menu.path}/${child.path}`;
        }

        return {
          title: child.meta?.title || child.title,
          icon: child.meta?.icon || 'widget-add-line-duotone',
          to: childPath,
          children: child.children ? child.children.map((subChild: any) => {
            // 三级菜单路径 = 父菜单路径 + 子菜单路径 + 三级菜单路径
            let subChildPath = subChild.path;
            if (!subChild.path.startsWith('/')) {
              subChildPath = `${childPath}/${subChild.path}`;
            }

            return {
              title: subChild.meta?.title || subChild.title,
              to: subChildPath
            };
          }) : undefined
        };
      }) : []
    };
  });
};

// 使用动态菜单数据，如果没有则使用静态数据
const sidebarMenu = computed(() => {
  if (menuStore.menus && menuStore.menus.length > 0) {
    const converted = convertToSidebarFormat(menuStore.menus);
    console.log('原始菜单数据:', menuStore.menus);
    console.log('转换后的侧边栏菜单:', converted);
    return converted;
  }
  return sidebarItems;
});

// 默认显示第一个菜单组
const currentMenu = ref<any>(1);

const customizer = useCustomizerStore();
</script>

<template>
  <!-- LeftSidebar Items -->
  <v-navigation-drawer v-model="customizer.Sidebar_drawer" elevation="0" app top="0" class="leftSidebar" width="240">
    <!---Logo part -->
    <div class="pa-4 pb-0">
      <Logo />
    </div>

    <!-- ---------------------------------------------- -->
    <!---Navigation -->
    <!-- ---------------------------------------------- -->
    <perfect-scrollbar class="scrollnavbar">
      <div class="px-4 py-0 sidebar-menus">
        <v-list class="py-1">
          <template v-for="(item, i) in sidebarMenu" :key="item.id">
            <!---一级菜单 -->
            <template v-if="item.children && item.children.length > 1">
              <!-- 多个子菜单，显示为可展开的折叠菜单 -->
              <NavCollapse :item="item" :level="0" />
            </template>
            <template v-else-if="item.children && item.children.length === 1">
              <!-- 只有一个子菜单，直接显示子菜单 -->
              <NavItem :item="item.children[0]" />
            </template>
            <template v-else>
              <!-- 没有子菜单，显示一级菜单 -->
              <NavItem :item="item" />
            </template>
          </template>
        </v-list>
      </div>
    </perfect-scrollbar>
  </v-navigation-drawer>
</template>
